// src/components/RouteRecommendation.jsx
import React from 'react';
import { Card, Button } from 'antd';

const RouteRecommendation = () => {
  const routes = [
    { title: '春季路线', summary: '赏花+温泉，感受春日暖意' },
    { title: '夏季路线', summary: '避暑+徒步，探索自然秘境' },
    { title: '秋季路线', summary: '红叶+古镇，体验人文风光' },
    { title: '冬季路线', summary: '滑雪+美食，享受冬日乐趣' },
    { title: '情侣度假', summary: '浪漫行程+特色民宿' },
    { title: '家人出游', summary: '亲子活动+安全路线' },
    { title: '运动之旅', summary: '登山+骑行，挑战自我' },
  ];

  return (
    <div style={{ width: '100%' }}>
      <h2>南涧旅游小攻略 - 旅游路线推荐</h2>
      {routes.map((route, index) => (
        <Card 
          key={index} 
          style={{ 
            marginBottom: 16, 
            padding: '8px 12px', 
            minHeight: 40, 
            display: 'flex', 
            justifyContent: 'space-between', 
            alignItems: 'center' 
          }}
        >
          <div>
            <h3 style={{ margin: 0 }}>{route.title}</h3>
            <p style={{ margin: 0, fontSize: 12 }}>{route.summary}</p>
          </div>
          <Button type="primary" size="small">
            <a href={`/route/${index}`}>了解详情</a>
          </Button>
        </Card>
      ))}
    </div>
  );
};

export default RouteRecommendation;